<template>
  <div class="router-demo-cotainer">
    <!-- bind 属性绑定 简写形式 v-bind  :props="..." -->
    <input type="text" v-model="msg" />
    <br />
    <hr />
    <br />
    <!--action="https://jsonplaceholder.typicode.com/posts/"
    action 必选参数，上传的地址 string — —
    headers 设置上传的请求头部 object — —
    multiple 是否支持多选文件 boolean — —
    data 上传时附带的额外参数 object — —
    name 上传的文件字段名 string — file
    with-credentials 支持发送 cookie 凭证信息 boolean — false
    show-file-list 是否显示已上传文件列表 boolean — true
    drag 是否启用拖拽上传 boolean — false
    accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） string — —
    on-preview 点击文件列表中已上传的文件时的钩子 function(file) — —
    on-remove 文件列表移除文件时的钩子 function(file, fileList) — —
    on-success 文件上传成功时的钩子 function(response, file, fileList) — —
    on-error 文件上传失败时的钩子 function(err, file, fileList) — —
    on-progress 文件上传时的钩子 function(event, file, fileList) — —
    on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 function(file, fileList) — —
    before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 function(file) — —
    before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 function(file, fileList) — —
    list-type 文件列表的类型 string text/picture/picture-card text
    auto-upload 是否在选取文件后立即进行上传 boolean — true
    file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] array — []
    http-request 覆盖默认的上传行为，可以自定义上传的实现 function — —
    disabled 是否禁用 boolean — false
    limit 最大允许上传个数 number — —
    on-exceed 文件超出个数限制时的钩子 function(files, fileList)
    :http-request="uploadRequest" :http-request="uploadRequest" -->
    <el-upload
      action="http://localhost:3000/upload"
      ref="uploadRef"
      :limit="3"
      multiple
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <br />
    <h4 @click="openFile">点击这里选择文件</h4>
    <br />
    <form ref="formRef">
      <input ref="iptFileRef" type="file" hidden />
    </form>
    <button @click="startUp">发起上传的请求</button>

    <hr />
    <br />
    <!-- <img style="width: 500px; height: 400px" src="https://cn.bing.com/th?id=OHR.PochuckValley_ZH-CN0432836291_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp" alt="" /> -->

    <br />
    <br />
    <iframe name="myIframe" style="display:none"></iframe>
    <p @click="downloadFile">点击这里进行文件的下载</p>
  </div>

  <!-- keep-alive是Vue的内置组件，可以将状态保留在内存中，防止组件切换过程中重复渲染DOM
使用keep-alive可以缓存页面，提高用户体验，同时keep-alive提供了两个钩子函数activated，deactivated
在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。
文档：在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。
activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。
activated调用时机：
第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用：
beforeMount=> 如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated)=>mounted=> activated 进入缓存组件 => 执行 beforeRouteEnter回调
因为组件被缓存了，再次进入缓存路由/组件时，不会触发这些钩子：// beforeCreate created beforeMount mounted 都不会触发。
deactivated：组件被停用(离开路由)时调用
使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。
这个钩子可以看作beforeDestroy的替代，如果你缓存了组件，要在组件销毁的的时候做一些事情，你可以放在这个钩子里。
如果你离开了路由，会依次触发：
组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由) -->
</template>

<script>
import collectMix from '@/mixins/collect'
export default {
  // 组件名称
  name: 'routerDemo',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  mixins: [collectMix],
  data() {
    return {
      msg: '头疼',
      fileList: []
    }
  },
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    // 前端进行下载，有两个方法： window.open 和表单提交
    downloadFile() {
      // window.open('http://localhost:3000/send/dark.png', 'myIframe')
    },
    // 打开文件
    openFile() {
      this.$refs.iptFileRef.click()
      console.log('ab')
      this.$nextTick(() => {})
      // this.$http.post('http://localhost:3000/upload').then(res => console.log(res))
    },
    startUp() {
      // 好吧 实现了
      // this.$refs.iptFileRef.value // 在计算机中的地址
      const files = this.$refs.iptFileRef.files
      const formData = new FormData()
      console.log('files', files[0])
      if (files.length < 1) return alert('重新选择文件')
      formData.append('file', files[0])
      this.$http.post('http://localhost:3000/upload', formData).then(res => console.log(res))
      const fileReader = new FileReader()
      const fileType = files[0].type
      fileReader.onload = function() {
        if (/^image/.test(fileType)) {
          // 读取结果在fileReader.result里面
          console.log(this.result)
          // $(`<img src="${this.result}">`).appendTo("body");
        }
      }
      // base64方式读取
      fileReader.readAsDataURL(files[0])
    },
    uploadRequest() {
      this.$http.post('http://localhost:3000/upload').then(res => console.log(res))
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped lang="less"></style>
